<template>
  <div class="fix_container">
    <div class="tip">
      <span>
        <PlusCircleOutlined />
      </span>
      <span @click="goIdleClick">闲置</span>
    </div>
    <span class="split"></span>
    <div class="tip" @click="messageClick">
      <span>
        <MessageOutlined />
      </span>
      <span>消息</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PlusCircleOutlined, MessageOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/module/user';
import { wsLogin } from '@/utils/ws/wsLogin';
import { useLoginStore } from '@/stores/module/login';
import { useMessageStore } from '@/stores/module/message';

const messageStore = useMessageStore()
const loginStore = useLoginStore()
const userStore = useUserStore();
const router = useRouter();

const goIdleClick = () => {
  if (userStore.isLoginState) {
    router.push('/idle');
  } else {
    wsLogin()
    loginStore.setOpenLoginToTrue()
  }

  router.push({
    path: '/idle',

  });
}

const messageClick = () => {
  // if (userStore.isLoginState) {
  //   messageStore.showMessage = true
  // } else {
  //   wsLogin()
  //   loginStore.setOpenLoginToTrue()
  // }
  messageStore.showMessage = true
}
</script>

<style lang="less" scoped>
.fix_container {
  width: 66px;
  height: 144px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  align-items: center;

  .tip {
    padding: 5px;
    width: 56px;
    height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

  }

  .split {
    width: 48px;
    height: 1px;
    background-color: #e8e8e8;
  }
}
</style>
